<template>
  <view class="group-goods" v-if="detail.length > 0">
    <view
      class="title-box x-bc"
      @tap="
        $yrouter.push({
          path: '/packageShop/pages/shop/HotNewGoods/index',
          query: { type: 2 },
        })
      "
    >
      <text class="title">热卖单品</text>
      <view class="group-people x-f">
        <text class="tip">更多</text>
        <text class="iconfont icon-more1"></text>
      </view>
    </view>
    <view class="goods-box swiper-box x-f">
      <swiper
        class="carousel"
        circular
        @change="swiperChange"
        :autoplay="true"
        duration="1500"
        indicator-color="#FEE900"
      >
        <swiper-item
          v-for="(goods, index) in goodsList"
          :key="index"
          class="carousel-item"
        >
          <view class="goods-list-box x-f">
            <block v-for="mgoods in goods" :key="mgoods.id">
              <view
                class="min-goods"
                @tap="
                  jump('/packageShop/pages/shop/GoodsCon/index', {
                    id: mgoods.id,
                  })
                "
              >
                <view class="img-box">
                  <!-- <view class="tag">hot</view> -->
                  <image class="img" :src="mgoods.image" mode="widthFix">
                  </image>
                </view>
                <view class="price-box">
                  <view class="y-f">
                    <!-- <text class="original">销量{{ mgoods.sales }}{{ mgoods.unitName }}</text> -->
                    <text class="original multi-ellipsis-1">{{
                      mgoods.storeName
                    }}</text>
                    <text class="seckill-current">￥{{ mgoods.price }}</text>
                  </view>
                </view>
                <view class="title"><slot name="titleText"></slot></view>
              </view>
            </block>
          </view>
        </swiper-item>
      </swiper>
      <view class="swiper-dots" v-if="goodsList.length > 1">
        <text
          :class="swiperCurrent === index ? 'dot-active' : 'dot'"
          v-for="(dot, index) in goodsList.length"
          :key="index"
        ></text>
      </view>
    </view>
  </view>
</template>

<script>
import shActivityGoods from "@/components/sh-activity-goods.vue";

export default {
  name: "HotCommodity",
  components: {
    shActivityGoods,
  },
  data() {
    return {
      goodsList: [],
      swiperCurrent: 0,
    };
  },
  props: {
    detail: Array,
  },
  computed: {},
  created() {
    setTimeout(() => {
      console.log("this.goodsList", this.goodsList);
    }, 2000);
  },
  watch: {
    detail(next) {
      this.goodsList = this.sortData(next, 3);
    },
  },
  methods: {
    swiperChange(e) {
      this.swiperCurrent = e.detail.current;
    },
    // 数据分层
    sortData(oArr, length) {
      let arr = [];
      let minArr = [];
      oArr.forEach((c) => {
        if (minArr.length === length) {
          minArr = [];
        }
        if (minArr.length === 0) {
          arr.push(minArr);
        }
        minArr.push(c);
      });

      return arr;
    },
    jump(path, query) {
      this.$yrouter.push({
        path,
        query,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.group-goods {
  position: relative;
  z-index: 9;
}

.swiper-box,
.carousel {
  width: 700rpx;
  height: 390upx;
  position: relative;
  border-radius: 20rpx;

  .carousel-item {
    width: 100%;
    height: 100%;
    // padding: 0 28upx;
    overflow: hidden;
  }

  .swiper-image {
    width: 100%;
    height: 100%;
    // border-radius: 10upx;
    background: #ccc;
  }
}

.swiper-dots {
  display: flex;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0rpx;
  z-index: 66;

  .dot {
    width: 24rpx;
    height: 8rpx;
    background: #eee;
    border-radius: 10rpx;
    margin-right: 10rpx;
  }

  .dot-active {
    width: 24rpx;
    height: 8rpx;
    background: #FF5900;
    border-radius: 10rpx;
    margin-right: 10rpx;
  }
}

// 今日必拼+限时抢购
.group-goods {
  // background: #fff;
  border-radius: 20rpx;

  .title-box {
    background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);
    padding: 40rpx 32rpx 32rpx;
    .title {
      font-size: 36rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #1a1a1a;
    }

    .group-people {
      display: flex;
      align-items: center;
      .icon-more1 {
        color: #1a1a1a;
        margin-left: 14rpx;
        font-size: 22rpx;
      }
      .time-box {
        font-size: 26rpx;
        color: #edbf62;

        .count-text-box {
          width: 30rpx;
          height: 34rpx;
          background: #edbf62;
          text-align: center;
          line-height: 34rpx;
          font-size: 24rpx;
          border-radius: 6rpx;
          color: rgba(#fff, 0.9);
          margin: 0 8rpx;
        }
      }

      .head-box {
        .head-img {
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
          background: #ccc;
        }
      }

      .tip {
        padding-left: 30rpx;
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #1a1a1a;
      }

      .cuIcon-right {
        font-size: 30rpx;
        line-height: 28rpx;
        color: #666;
      }
    }
  }

  .goods-box {
    padding-left: 32rpx;
    width: 726rpx;
    .goods-item {
      margin-right: 22rpx;
      &:nth-child(4n) {
        margin-right: 0;
      }
    }
  }
  .min-goods {
    width: 32% !important;
    margin-right: 16rpx; //22rpx
    border-radius: 16rpx !important;
    overflow: hidden;
    // &:nth-child(3n) {
    //   margin-right: 0;
    // }
  }
}
// 重写
.img-box {
  width: 100%;
  height: 218rpx;
}
// 重写
.original {
  width: 100% !important;
  font-size: 24rpx !important;
  font-family: PingFangSC-Medium, PingFang SC !important;
  font-weight: 500 !important;
  color: #333333 !important;
  //   margin: 16rpx 0 20rpx 0;
}
// 重写
.seckill-current {
  width: 100% !important;
  margin-top: 8rpx;
  width: 100% !important;
  text-align: left !important;
  font-size: 32rpx !important;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500 !important;
  color: #ff4444 !important;
  line-height: 36rpx !important;
}
.y-f {
  padding: 0 16rpx 16rpx 16rpx !important;
}
.swiper-dots {
  bottom: 20rpx;
  .dot {
    width: 10rpx;
    height: 10rpx;
    border-radius: 50%;
  }
  .dot-active {
    width: 10rpx;
    height: 10rpx;
    border-radius: 50%;
    background-color: #fee900;
  }
}
</style>
